<template>
    <div>

<!--        分类导航-->
        <div class="offcn_lits" v-html="navHtml"></div>

<!--        类别展示-->
        <category-nav :categories="categories" :init-cate-id="cateId" :type-id="typeId" @changeParams="changeParams"></category-nav>

        <div class="offcnkclb_main">
<!--            排序价格条件-->
            <condition-nav  @changeCondition="changeCondition"></condition-nav>
<!--            课程列表-->
            <course-items :courses="courseList" ></course-items>

            <div class="clezr"></div>

<!--            分页
                1\ 安装 element-ui
                npm i element-ui -S
                2\ 在main.js 引入 element-ui
                3\ 安装按需引入组件
                   npm install babel-plugin-component -D

-->
            <div  class="el-pagination my_page">

                <el-button  @click="toFirstPage" class="btn-first" >首页</el-button>
                <el-pagination
                        :page-sizes="[4,8,16,20]"
                        :page-size="params.pageSize"
                        :total="params.totalSize"
                        :current-page="params.pageNo"
                        @current-change="handleCurrentChange"
                        layout="prev, pager,next,sizes,slot"
                        prev-text="上一页"
                        next-text="下一页"
                        background
                >
                <el-button  @click="toLastPage" class="btn-last" >尾页</el-button>
                </el-pagination>
            </div>

        </div>


    </div>
</template>

<script>
    import CategoryNav from "../components/CategoryNav";
    import ConditionNav from "../components/ConditionNav";
    import CourseItems from "../components/CourseItems";
    import {Pagination} from 'element-ui'
    import {getCourseListAPI} from "../network/course";
    import {getCategoriesApi} from "../network/category";

    export default {
        name:'CourseList',

        data:function () {
            return {
                categories:[],
                courseList:[],
                typeId:0,
                params:{
                    cateId:0,
                    teachType:0,
                    sortType:0,
                    priceType:0,
                    startPrice:0,
                    endPrice:0,
                    pageNo:1,
                    pageSize:4,
                    totalPage:0,
                    totalSize:0
                }
            }
        },
        created() {
            this.$emit('showCate',false)
            //调用分类接口
            this.categoryQuery()
        },
        computed:{
            cateId:function () {
                return this.$route.params.id ? Number(this.$route.params.id):0
            },
            categoryMap:function(){
                let map={}
                if(this.categories){
                    this.categories.forEach((cate)=>{
                        map[cate.id]=cate
                        if(cate.subjectList){
                            cate.subjectList.forEach((subCate)=>{
                                map[subCate.id]=subCate
                            })
                        }

                    })
                }
                return map
            },
            navHtml:function () {
                // console.log("navHtml")
                let defHtml="<a href=\"\">首页</a> > <a href=\"/list/\">全部课程</a>"
                if(this.params.cateId>0){
                    let curCate  = this.categoryMap[this.params.cateId]
                    if(curCate){
                        if(curCate.level===2){
                            let parentCate = this.categoryMap[curCate.parentId]
                            defHtml = defHtml + '<a href="/list-'+parentCate.id +'"> >'+parentCate.name+'</a>'
                        }
                        defHtml = defHtml +'>'+curCate.name
                    }
                }
                return defHtml
            }
        },
        methods:{
            categoryQuery:function(){
                getCategoriesApi().then(res=>{
                    this.categories = res
                })
            },

            changeParams:function (queryParam) {
                //分类授课方式查询条件变化
                this.params.cateId = queryParam.cateId
                this.params.teachType = queryParam.teachType
                this.params.pageNo=1
                //调用查询方法
                this.courseQuery()

            },
            changeCondition:function(condition){
                this.params.sortType= condition.sort
                this.params.priceType = condition.priceType
                this.params.startPrice = condition.priceBegin
                this.params.endPrice = condition.priceEnd
                this.params.pageNo=1
                this.courseQuery()

            },
            courseQuery:function () {
                //调用后端API
                getCourseListAPI(this.params)
                .then(res=>{
                    console.log(res);
                    this.courseList = res.records
                    this.params.totalSize=res.total
                    this.params.totalPage=res.pages
                })
            },
            handleCurrentChange:function (val) {
                //当前页号发生变化
                this.params.pageNo=val
                this.courseQuery()
            },
            toFirstPage:function () {
                this.params.pageNo=1
                this.courseQuery()
            },
            toLastPage:function () {
                this.params.pageNo=this.params.totalPage
                this.courseQuery()
            }


        },
        components:{
            CategoryNav,ConditionNav,CourseItems,Pagination
        }

    }

</script>

<style>

    @import "../../public/skin_it/skin_youxue.css";
    @import "../../public/css/offcn_style1200.css";
    /*@import "../../public/css/base.css";*/


    /*课程列表页 新样式 bitoa  2016年11月25日1*/
    .xk_list{ width:1200px; margin:0 auto; padding-bottom:20px; clear:both;}
    .xk_list li{ float:left;width:285px; height:230px; margin-top:30px; position:relative; margin-right:20px;}
    .xk_list .xk_nmr{ margin-right:0;}
    .xk_list li dl{ width:285px; height:230px;}
    .xk_list li dt{ width:285px; height:160px; overflow:hidden;}
    .xk_list li dt img{display:block;width:100%;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}
    .xk_list li dd{ height:72px;}
    .xk_list li dd a{ font-size:16px;font-family:"微软雅黑"; color:#333; line-height:46px;}
    .xk_list li dd p span{color:#999; font-family:"微软雅黑";}
    .xk_list li dd p em{color:#efefef;,margin:0 4px}
    .xk_list .green{color: #18b160;}
    .xk_list .orange{color: #ff6600;}
    .xk_list li dd p font{ float:right; color:#ff4a00; font-size:14px; font-family:"微软雅黑";}
    .xk_list li:hover:before{background:#fff;-webkit-box-shadow:0 0 9px 1px #ccc;box-shadow:0 0 9px 1px #ccc;content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;margin:auto;z-index:-1;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;}
    .xk_list li:hover dt img{-webkit-transform:scale(1.15);transform:scale(1.15)}
    .clezr{ height:30px; clear:both;}
    @media screen and (max-width:1200px){
        .xk_fl{ width:960px;}
        .xk_fl dd{ width:870px;}
        .xk_nav{ width:960px;}
        .xk_list{ width:960px;}
        .xk_list li{ width:225px; height:182px;}
        .xk_list li dl{ width:225px; height:182px;}
        .xk_list li dt{ width:225px; height:126px;}
        .xk_list li dd{ height:56px;}
    }
    .my_page{
        float: right;
        text-align: right;
        display: inline-block;
        margin-bottom: 20px;
    }

    .btn-first{
        float: left;
        margin-top: 20px;
        display: inline-block;
    }

</style>